<template>
  <div>
    <page-header title="赠送年卡"></page-header>
    <div>
      <el-form
        :model="formData"
        label-width="120px"
        ref="form"
        :rules="rules"
        size="small">
        <el-form-item label="学号" prop="studentNo" style="width: 310px">
          <el-input v-model="formData.studentNo"></el-input>
        </el-form-item>
        <el-form-item label="课程分类" prop="courseCategoryId">
          <el-select v-model="formData.courseCategoryId" placeholder="请选择课程分类" filterable>
            <el-option
              v-for="item in secondCategoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄段" prop="studentAgeId">
          <el-select v-model="formData.studentAgeId" placeholder="请选择年龄段">
            <el-option
              v-for="item in studentAgeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" prop="year">
          <el-radio-group v-model="formData.year">
            <el-radio :label="1">一年</el-radio>
            <el-radio :label="2">两年</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmGive">确定赠送</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getSecondCategoryList, getStudentAgeOptions } from '@/utils';
import { giveVip } from '@/api/base-config';

export default {
  data() {
    return {
      formData: {
        year: 1,
        courseCategoryId: '',
        studentAgeId: '',
        studentNo: '',
      },
      studentAgeOptions: [],
      secondCategoryList: [],
      rules: {
        studentNo: [{ required: true, message: '请输入学生学号' }],
        courseCategoryId: [{ required: true, message: '请选择课程分类' }],
        studentAgeId: [{ required: true, message: '请选择学生年龄段' }],
      },
    };
  },
  methods: {
    async getOptions() {
      const [secondCategoryList, studentAgeOptions] = await Promise.all([
        getSecondCategoryList(),
        getStudentAgeOptions(),
      ]);
      this.secondCategoryList = secondCategoryList;
      this.studentAgeOptions = studentAgeOptions;
    },
    confirmGive() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            await giveVip(this.formData);
            this.$message.success('赠送成功');
            this.$refs.form.resetFields();
          } catch (err) {
            console.log(err);
          }
        }
      });
    },
  },
  async created() {
    await this.getOptions();
  },
};
</script>
